<template>
  <view class="bg-white flex flex-col h-auto">
    <nav-bar title="菜品详情" color="white" bg-color="#111827" show-back></nav-bar>
    <view class="content p-20rpx flex-auto h-full">
      <u-row gutter="10rpx" custom-style="flex:auto;align-items: baseline;">
        <u-col span="12">
          <u-form ref="refAddVipForm" :model="formData" :rules="formRules" label-width="70rpx" label-position="left">
            <view class="flex justify-start">
              <u-form-item label="类别:" prop="foodTypeName" required>
                <view class="my-5rpx w-full form-item">
                  <u-input v-model="formData.foodTypeName" placeholder="请输入" font-size="10rpx" disabled></u-input>
                </view>
              </u-form-item>
            </view>
            <view class="flex justify-start">
              <u-form-item label="菜品名称:" required>
                <view class="my-5rpx w-full form-item">
                  <u-input disabled v-model="formData.name" placeholder="请输入" font-size="10rpx"></u-input>
                </view>
              </u-form-item>
              <u-form-item label="价格:" prop="price" required>
                <view class="w-full form-item">
                  <u-input disabled type="digit" v-model="formData.price" font-size="10rpx"></u-input>
                </view>
              </u-form-item>
            </view>

            <view class="flex justify-start flex-col">
              <u-form-item label="价格:" label-position="top">
                <view class="w-full form-item">
                  <uni-table
                    :loading="pageStatus.loading"
                    class="table-height"
                    stripe
                    emptyText="暂无更多数据"
                    :border="true"
                  >
                    <!-- 表头行 -->
                    <uni-tr class="thead-tr">
                      <uni-th align="center" class="fixed-left">序号</uni-th>
                      <uni-th align="center">价格</uni-th>
                      <uni-th align="center">人员类型</uni-th>
                      <uni-th align="center">客户类别</uni-th>
                      <uni-th align="center">卡类别</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(item, index) in formData.priceItem" :key="index">
                      <uni-td align="center" class="fixed-left">{{ index + 1 }}</uni-td>

                      <uni-td align="center">{{ item.price }}</uni-td>
                      <uni-td align="center">{{
                        item.customerTypeName
                        /* getFieldValueByDatacom(item.customerTypeId, customerTypeList) */
                      }}</uni-td>
                      <uni-td align="center">{{
                        getFieldValueByDatacom(item.customerCategoryId, customerTypeSmbelList)
                      }}</uni-td>
                      <uni-td align="center">{{ getFieldValueByDatacom(item.cardType, cardTypeList) }}</uni-td>
                    </uni-tr>
                  </uni-table>
                </view>
              </u-form-item>
              <!-- 计算原料数据 -->
              <view class="flex text-base mt-10rpx total-bar">
                <view class="mr-20rpx">
                  <text>热量（千卡）：</text>
                  <text>{{ totalData.totalHeat }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>蛋白质（g）：</text>
                  <text>{{ totalData.totalProtein }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>脂肪（g）：</text>
                  <text>{{ totalData.totalFat }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>淡水化合物（g）：</text>
                  <text>{{ totalData.totalCarbohydrate }}</text>
                </view>
              </view>
            </view>

            <view class="flex justify-start">
              <u-form-item label="辣味:" prop="spicy" required>
                <view class="my-5rpx w-full form-item">
                  <uni-data-select
                    v-model="formData.spicy"
                    :localdata="formatDictData(dicts['sys_spicy'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
              <u-form-item label="口感:" prop="texture" required>
                <view class="w-full form-item">
                  <uni-data-select
                    v-model="formData.texture"
                    :localdata="formatDictData(dicts['sys_texture'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
            </view>
            <view class="flex justify-start">
              <u-form-item label="口味:" prop="flavor" required>
                <view class="my-5rpx w-full form-item">
                  <uni-data-select
                    v-model="formData.flavor"
                    :localdata="formatDictData(dicts['sys_flavor'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
              <u-form-item label="推荐:" prop="recommend" required>
                <view class="w-full form-item">
                  <u-radio-group v-model="formData.recommend" disabled active-color="var(--kui-color-theme)">
                    <u-radio
                      :label="item.label"
                      :name="item.value"
                      v-for="item in dataSource.yeasOrNo"
                      :key="item.value"
                      icon-color="var(--kui-color-theme)"
                      label-color="var(--kui-color-theme)"
                      label-size="10rpx"
                      size="10rpx"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </u-form-item>
            </view>
            <view class="flex justify-start" required>
              <u-form-item label="会员折扣:" prop="memberDiscount" required>
                <view class="w-full form-item">
                  <u-radio-group v-model="formData.memberDiscount" disabled active-color="var(--kui-color-theme)">
                    <u-radio
                      :label="item.label"
                      :name="item.value"
                      v-for="item in dataSource.yeasOrNo"
                      :key="item.value"
                      label-size="10rpx"
                      size="10rpx"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </u-form-item>
              <u-form-item label="前台打票:" prop="frontDeskPrinting" required>
                <view class="w-full form-item">
                  <u-radio-group v-model="formData.frontDeskPrinting" disabled active-color="var(--kui-color-theme)">
                    <u-radio
                      :label="item.label"
                      :name="item.value"
                      v-for="(item, index) in dataSource.yeasOrNo"
                      :key="item.index"
                      label-size="10rpx"
                      size="10rpx"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </u-form-item>
            </view>

            <view class="flex justify-start">
              <u-form-item label="后厨打票:" prop="rearKitchenPrinting" required>
                <view class="w-full form-item">
                  <u-radio-group v-model="formData.rearKitchenPrinting" disabled active-color="var(--kui-color-theme)">
                    <u-radio
                      :label="item.label"
                      :name="item.value"
                      v-for="item in dataSource.yeasOrNo"
                      :key="item.value"
                      label-size="10rpx"
                      size="10rpx"
                    ></u-radio>
                  </u-radio-group>
                </view>
              </u-form-item>
            </view>
            <view class="flex justify-start flex-col">
              <u-form-item label="原料:" label-position="top">
                <view class="w-full form-item">
                  <uni-table
                    :loading="pageStatus.loading"
                    class="table-height"
                    stripe
                    emptyText="暂无更多数据"
                    :border="true"
                  >
                    <!-- 表头行 -->
                    <uni-tr class="thead-tr">
                      <uni-th align="center" class="fixed-left">序号</uni-th>
                      <uni-th align="center">名称</uni-th>
                      <uni-th align="center">热量（千卡）</uni-th>
                      <uni-th align="center">蛋白质（g）</uni-th>
                      <uni-th align="center">脂肪（g）</uni-th>
                      <uni-th align="center">淡水化合物（g）</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(item, index) in formData.materialRecipeLevelEntityList" :key="item.buffetOrderId">
                      <uni-td align="center" class="fixed-left">{{ index + 1 }}</uni-td>
                      <uni-td align="center">{{ item.materialName }}</uni-td>
                      <uni-td align="center">{{ item.quantityHeat }}</uni-td>
                      <uni-td align="center">{{ item.protein }}</uni-td>
                      <uni-td align="center">{{ item.fat || "-" }}</uni-td>
                      <uni-td align="center">{{ item.carbohydrate }}</uni-td>
                    </uni-tr>
                  </uni-table>
                </view>
              </u-form-item>
              <!-- 计算原料数据 -->
              <view class="flex text-base mt-10rpx total-bar">
                <view class="mr-20rpx">
                  <text>热量（千卡）：</text>
                  <text>{{ totalData.totalHeat }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>蛋白质（g）：</text>
                  <text>{{ totalData.totalProtein }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>脂肪（g）：</text>
                  <text>{{ totalData.totalFat }}</text>
                </view>
                <view class="mr-20rpx">
                  <text>淡水化合物（g）：</text>
                  <text>{{ totalData.totalCarbohydrate }}</text>
                </view>
              </view>
            </view>

            <u-form-item label="禁忌人群:" prop="rearKitchenPrinting" required>
              <view class="w-full form-item">
                <u-checkbox-group>
                  <u-checkbox
                    v-for="(taboo, index) in dicts['sys_tabooPopulation']"
                    :key="index"
                    :label="taboo.dictValue"
                    :checked="formData.tabooPopulation?.includes(taboo.dictValue) ? true : false"
                    :disabled="true"
                  >
                  </u-checkbox>
                </u-checkbox-group>
              </view>
            </u-form-item>
            <u-form-item label="食材说明:" prop="introcetion" required>
              <view class="w-full form-item">
                <u-textarea disabled v-model="formData.introcetion" placeholder="介绍、食物说明"></u-textarea>
              </view>
            </u-form-item>
            <view class="flex justify-start">
              <u-form-item label="功效:">
                <view class="my-5rpx w-full form-item">
                  <uni-data-select
                    v-model="formData.effect"
                    :localdata="formatDictData(dicts['sys_effect_food'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
              <u-form-item label="烹饪方法:" >
                <view class="w-full form-item">
                  <uni-data-select
                    v-model="formData.cookingMethods"
                    :localdata="formatDictData(dicts['sys_cookingMethods_food'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
            </view>
            <view class="flex justify-start">
              <u-form-item label="单位:" >
                <view class="my-5rpx w-full form-item">
                  <uni-data-select
                    v-model="formData.unit"
                    :localdata="formatDictData(dicts['sys_unit_food'], true)"
                    disabled
                    :clear="false"
                  ></uni-data-select>
                </view>
              </u-form-item>
              <view class="flex-1"></view>
            </view>

            <u-form-item label="图片:" prop="photo" required>
              <view class="w-full form-item">
                <u-image :src="formData.photo" mode="aspectFill" width="100rpx" height="100rpx" radius="5rpx"></u-image>
              </view>
            </u-form-item> </u-form
        ></u-col>
      </u-row>
    </view>

  
  </view>
</template>
<script setup>
import { formatDictData, formatMoney, getFieldValueByDatacom, loadSysDict, splitStrToArray } from "@/utils/util";
import { reactive, ref, computed, onMounted } from "vue";
import { foodDetails, getCustomerTypeSelect } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { useStore } from "vuex";
const pageStatus = reactive({
  loading: false,
});

// 类字典 - 客户类别
const customerTypeSmbelList = ref([]);
const customerTypeSmbel = async () => {
  try {
    const pam = { dataType: 8 };
    const { data, success } = await getCustomerTypeSelect(pam);
    if (data) {
      customerTypeSmbelList.value = data.map((v) => {
        return { text: v.typeName, value: v.customerInformationTypeId };
      });
    }
  } catch (error) {
    console.error("获取客户类型失败: " + error.message);
  }
};
customerTypeSmbel();

// 类字典 - 卡类型
const cardTypeList = ref([
  { text: "会员卡", value: "1" },
  { text: "套餐卡", value: "2" },
]);

const dataSource = {
  yeasOrNo: [
    {
      label: "是",
      value: "1",
    },
    {
      label: "否",
      value: "2",
    },
  ],
};

// 表单
const formData = reactive({
  name: "",

  /** 原料list */
  materialRecipeLevelEntityList: [],
  frontDeskPrinting: "2" /** 前台打印 */,
});

// 表单规则
const formRules = {
  chargeMoney: {
    type: "string",
    required: true,
    message: "请填输入充值金额",
    trigger: ["blur", "change"],
  },
};

const refAddVipForm = ref();

const getPageData = async () => {
  try {
    const pam = {
      foodTypeId: pageData.id,
    };
    const { data, success } = await foodDetails(pam);
    if (!success) throw new Error("获取数据失败");
    Object.assign(formData, data);
  } catch (error) {
    console.error(error);
  }
};

// 表格原料数据汇总
const totalData = computed(() => {
  const total = {
    totalHeat: 0,
    totalProtein: 0,
    totalFat: 0,
    totalCarbohydrate: 0,
  };
  formData.materialRecipeLevelEntityList?.forEach((item) => {
    total.totalHeat += Number(item.quantityHeat) || 0;
    total.totalProtein += Number(item.protein) || 0;
    total.totalFat += Number(item.fat) || 0;
    total.totalCarbohydrate += Number(item.carbohydrate) || 0;
  });
  return total;
});

const pageData = {
  id: "", // 传递的id
};

const store = useStore();
const dicts = reactive({
  sys_tabooPopulation: [],
  sys_flavor: [],
  sys_texture: [],
  sys_spicy: [],
  sys_unit_food: [],
  sys_cookingMethods_food: [],
  sys_effect_food: [],
});

onLoad(async (opt) => {
  if (opt.id) {
    pageData.id = opt.id;
  }
  try {
    /** 字典 */
    await loadSysDict([
      "sys_tabooPopulation",
      "sys_flavor",
      "sys_texture",
      "sys_texture",
      "sys_spicy",
      "sys_unit_food",
      "sys_cookingMethods_food",
      "sys_effect_food",
    ]);
    const dictSource = store.getters["dicts/getDictSource"];
    Object.assign(dicts, dictSource);
    // console.log("onLoad >> loadSysDict", dicts);
  } catch (error) {
    console.warn("ERROE >> ", error);
  }

  getPageData();
});
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  ::v-deep .u-search__content__icon {
    display: none;
  }

  ::v-deep .u-upload__wrap {
    justify-content: center;
    align-items: center;
  }

  ::v-deep .u-upload__button {
    margin: 0;
  }

  ::v-deep .u-form-item {
    flex: 1;
    justify-content: center;
    min-height: 40rpx;

    .u-form-item__body__left {
      margin-bottom: 10rpx !important;
    }

    .u-radio,
    .u-checkbox-label--left {
      margin-right: 10rpx;
    }

    .u-checkbox__icon-wrap--disabled--checked,
    .u-radio__icon-wrap--disabled--checked {
      border-color: var(--kui-color-theme) !important;
      background: var(--kui-color-theme-light) !important;
    }
  }

  .total-bar {
    background: linear-gradient(45deg, var(--kui-color-theme-light), transparent);
    padding: 5rpx 10rpx;
    border-radius: 2rpx;
    color: rgb(94, 94, 94);
    position: relative;
    padding-left: 20rpx;
    &::before {
      position: absolute;
      left: 5rpx;
      top: 0;
      content: "";
      background-color: white;
      width: 3rpx;
      height: 100%;
    }
  }

  .form-item {
    margin-right: 50rpx;
    flex: 1;
  }
}

// .btns-item {
//   background-color: #efefef;
//   padding: 5rpx 20rpx;
//   border-radius: 5rpx;
//   margin: 0rpx 15rpx;
//   font-size: 12rpx;

//   .btns-item-txt {
//     font-size: 10rpx;
//     padding: 5rpx 10rpx;
//   }

//   ::v-deep .u-button {
//     padding: 2rpx 10rpx;
//   }
// }
</style>
